<template>
    <div class="rank" :style="{paddingBottom:showBar?'40px':''}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1592243_edabzejozd.css">
        <div class="crunchies">
			<div class="phList" @click="cruBtn" v-for="(item,index) in crchies" :key="index">
				<div class="crunchiesImg">
					<img :src="item.coverImgUrl" alt="">
				</div>
				<div class="crunchiesText">
					<!-- <p>{{item.name}}</p> -->
					<div class="songItem" v-for="(it,idx) in item.tracks" :key="idx">
						<span>{{idx+1}}. </span><span>{{it.first}}</span> - <span>{{it.second}}</span>
					</div>
				</div>
			</div>
		</div>
		<song class="song-item" v-for="(item,index) in songCrunchies" :key="index"
			:songData="{
				songIdx:index,
				picUrl:item.artists[0].img1v1Url,
				songName:item.name,
				ar:item.artists[0].name,
				id:item.id,
				itemMp3:item,
				}"
			:playList="ListIdData"
			:songIndex="index"
		>
		</song>
    </div>
</template>
<script>
import api from '../js/api.js';
import song from "../components/song.vue"
  export default {
	data() {
		return {
			// 轮播图
			bannerList:[],
			// 榜单
			crchies:[],
			// 各个歌单音乐歌单
			songCrunchies:"",
		}
	},
	components:{
		song
	},
	methods:{
		cruBtn(){
			// 所有榜单内容摘要
			this.axios({
				url:api.crusongs+1
			}).then(res=>{
				this.songCrunchies = res.data.playlist.tracks
				window.console.log(this.songCrunchies);
			});
		}
	},
	created() {
		// 获取轮播图
		this.axios({
			// 使用对应接口
			url:api.banner
		}).then(res=>{
			// window.console.log(res)
			this.bannerList = res.data.banners
		});
		// 获取榜单
		this.axios({
			url:api.crunchies
		}).then(res=>{
			this.crchies = res.data.list
			window.console.log(this.crchies);
		});
		// 所有榜单内容摘要
		this.axios({
			url:api.toplistInro
		}).then(res=>{
			this.crchies = res.data.list
			window.console.log(this.crchies);
		});
		
	},
	// 监听播放状态弹出播放栏
	computed: {
	    showBar(){
	        return this.$store.state.musicData.al.id;
	    },
	},
  }
</script>
<style lang="scss" scoped>
    .rank{
		.crunchies{
			margin-top: 48px;
			.phList{
				text-align: left;
				margin-bottom: 2px;
				padding: 4px 10px;
				border-bottom: 1px solid pink;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.crunchiesImg{
					width: 25%;
					img{
						width: 72px;
						height: 72px;
						border-radius: 5px;
					}
				}
				.crunchiesText{
					width: 75%;
					.songItem{
						width: 90%;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						margin-bottom: 2px;
					}
				}
			}
		}
	}
</style>